<template>
	<div>
		<div class="tab">
			<ul>
				<li
					@click="toggle(index)"
					:class="currentIndex === index ? 'title active' : 'title'"
					:key="item.id"
					v-for="(item, index) in data"
				>
					{{ item.label }}
				</li>
			</ul>
            <keep-alive>
                <component :is="comName[currentIndex]"></component>
            </keep-alive>
		</div>
	</div>
</template>
<script>
import SwitchCase from "./SwitchCase.vue"; // 开关案例
import TableList from "./TableList.vue"; // 表格渲染
import CheckInputBox from "./CheckInputBox.vue"; // 复选框渲染案例
import BrandManagement from "./BrandManagement.vue"; // 品牌管理案例
export default {
    components: {
        SwitchCase,
        TableList,
        CheckInputBox,
        BrandManagement
    },
	data() {
		return {
            comName: ["SwitchCase", "TableList", 'CheckInputBox', 'BrandManagement'],
			currentIndex: 2,
			data: [
				{
					id: 1,
					label: "电视",
				},
				{
					id: 2,
					label: "冰箱",
				},
				{
					id: 3,
					label: "电脑",
				},
				{
					id: 4,
					label: "洗衣机",
				},
			],
		};
	},
	methods: {
		toggle(index) {
			this.currentIndex = index;
		},
	},
};
</script>
<style scoped>
ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid red;
}
.title {
	width: 200px;
	height: 50px;
	text-align: center;
	line-height: 50px;
}
.title.active {
	background-color: orange;
}
.content {
	display: block;
}
.content.show {
	display: block;
}
.content.hidden {
	display: none;
}
</style>